<template>
  <view class="content">
    <uni-nav-bar
      title="换箱"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view class="header">
      <view
        v-for="(v, i) in huanxiang_arr"
        :key="i"
        class="c_bg"
        :class="page_no == v.page_no ? 'header_view_sel' : 'header_view'"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc64.png')})`
        }"
        @click="change_head(v.page_no)"
      >
        {{ v.title }}

        <!-- <image
          v-if="page_no == v.page_no"
          :src="$img('/static/img/tab_arrow.png')"
          class="arrow"
        ></image> -->
      </view>
    </view>
    <!-- 商品展示 -->
    <view class="goods_v">
      <view class="flex_center" @click="change_saixuan(1, page_no)">
        <text :style="saixuan_index == 1 ? 'color:#E40D1D;' : ''">
          箱号 {{ '↓' }}
        </text>
        <!-- <image
          v-if="saixuan_index == 1"
          :src="$img('/static/img/bottom_act.png')"
          class="goods_v_1"
        ></image>
        <image
          v-else
          :src="$img('/static/img/bottom.png')"
          class="goods_v_1"
        ></image> -->
      </view>
      <view
        class="flex_center"
        @click="change_saixuan(2, page_no)"
        style="margin-left: 40rpx"
      >
        <text :style="saixuan_index == 2 ? 'color:#E40D1D;' : ''">
          余量 {{ '↓' }}
        </text>
        <!-- <image
          v-if="saixuan_index == 2"
          :src="$img('/static/img/bottom_act.png')"
          class="goods_v_1"
        ></image>
        <image
          v-else
          :src="$img('/static/img/bottom.png')"
          class="goods_v_1"
        ></image> -->
      </view>
    </view>
    <!-- 赏品余量 -->
    <view class="yuliang">
      <view
        class="yuliang_list"
        v-for="(v, i) in goodsDetail"
        :key="i"
        @click="todetail(v.num)"
      >
        <view v-if="v.surplus_all_stock == 0" class="shadow">
          <!-- <image :src="$img('/static/img/sold_out.png')" mode="scaleToFill" /> -->
          <view class="sold-out">已售罄</view>
        </view>

        <view class="box-num">第{{ v.num }}箱</view>

        <!-- <view class="has-num">
          剩余
          <text>{{ v.surplus_all_stock }}</text>
          张
        </view> -->

        <view class="box-wrap">
          <view class="box">
            <image :src="$img('/static/img2/cc65.png')" lazy-load></image>
          </view>

          <view class="box-has">
            剩
            <text>{{ v.surplus_all_stock }}</text>
            张
          </view>
        </view>

        <view class="type-list">
          <view v-for="(a, b) in v.goodslist" :key="b" class="type-item">
            <view class="type-item-title">{{ a.shang_title }}</view>

            <view class="type-item-num">
              {{ a.surplus_stock }}/{{ a.stock }}
            </view>
          </view>
        </view>

        <!-- <view class="yuliang_list_top">
          <view>第{{ v.num }}箱</view>
          <view>剩余{{v.surplus_all_stock}}张</view>
        </view>
        <view style="padding: 0 20rpx">
          <view class="list_l">
            <image
              :src="
                v.surplus_all_stock == 0
                  ? z_imgPath + 'qiangguangle1.png'
                  : z_imgPath + 'kong_box.png'
              "
            ></image>
            <view style="margin-top:65rpx;color: #fff;">第{{v.key}}箱</view>
						<view style="color: #FFFFFF;">剩
						<text style="color: #96FFFE;">{{v.total}}</text> 张</view>
          </view>
          <view
            class="list_r"
            :style="v.surplus_all_stock == 0 ? 'color:#999' : 'color:#fff'"
          >
            <view v-for="(a, b) in v.goodslist" :key="b">
              <text>{{ a.shang_title }}</text>
              <text>{{ a.surplus_stock }}/{{ a.stock }}</text>
            </view>
          </view>
        </view>
        <view
          class="yuliang_list_bom"
          v-if="v.surplus_all_stock == 0"
          style="color: #999"
        >
          售空
        </view>
        <view class="yuliang_list_bom" v-else style="color: #fff">
          剩余{{ v.surplus_all_stock }}张
        </view>
        <view class="qiangguang" v-if="v.total==0">
					<image :src="z_imgPath+'qiangguangle1.png'"></image>
				</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import uParse from '@/components/gaoyia-parse/parse.vue'
export default {
  components: {
    uParse
  },
  data() {
    return {
      z_imgPath: this.$z_img2 + 'shouye/detail/',
      huanxiang_arr: [],
      // '1 - 10箱', '11 - 20箱', '21 - 30箱', '31 - 40箱', '41 - 50箱'
      header_index: 1,
      saixuan_index: 1,
      page_no: 0,
      show: 1,
      goodsDetail: [],

      id: '',
      count: '',
      type_text: ''
    }
  },
  onLoad(v) {
    this.id = v.id
    this.type_text = v.type_text
    this.getData()
    let that = this
    that.req({
      url: 'goodslist_count',
      data: {
        goods_id: that.id
      },
      success(res) {
        if (res.status == 1) {
          that.huanxiang_arr = res.data
        }
      }
    })
  },

  methods: {
    back() {
      uni.navigateBack()
    },

    todetail(e) {
      uni.redirectTo({
        url:
          'detail?goods_id=' +
          this.id +
          '&goods_num=' +
          e +
          '&type_text=' +
          this.type_text
      })
    },
    change_saixuan(a, b) {
      this.saixuan_index = a
      this.page_no = b
      this.getData()
    },
    change_head(e) {
      this.page_no = e
      this.getData()
    },
    getData(e) {
      let that = this
      that.req({
        url: 'goodslist_content',
        data: {
          goods_id: that.id,
          sort: that.saixuan_index,
          page_no: that.page_no
        },
        success(res) {
          that.goodsDetail = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss">
.list_r text:nth-of-type(2) {
  /* color: #F96026; */
}

.list_r > view {
  width: 47%;
  display: flex;
  justify-content: space-between;
  line-height: 44rpx;
}

.list_r > view:nth-child(3n-1) {
  margin-left: 15rpx;
}

.list_r {
  // margin-left: 40rpx;
  // width: 500rpx;
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  max-height: 183rpx;
  overflow-y: scroll;
}

.list_l {
  width: 130rpx;
  height: 116rpx;
  margin: 10rpx auto 0;
  image {
    width: 100%;
    height: 100%;
  }
}

.yuliang {
  padding: 1rpx 0 40rpx;

  &_list {
    padding: 60rpx 30rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 710rpx;
    margin: 30rpx auto 0;
    background: #252525;
    border: 2rpx solid #444444;

    .shadow {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .sold-out {
        transform: rotate(-20deg);
        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000,
          0 0 3px #000000;
      }
    }

    .box-num {
      position: absolute;
      left: 0;
      top: 0;
      height: 36rpx;
      display: flex;
      align-items: center;
      padding: 0 16rpx;
      background: #e4690d;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #ffffff;
    }

    .has-num {
      position: absolute;
      top: 10rpx;
      right: 30rpx;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      text {
        color: #d0d1ff;
      }
    }

    .box-wrap {
      width: 108rpx;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      // margin-top: 20rpx;
      // margin-left: 20rpx;

      .box {
        width: 108rpx;
        height: 108rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .box-has {
        margin: 10rpx 0 0;
        height: 40rpx;
        padding: 0 12rpx;
        border: 1rpx solid #e40d1d;
        border-radius: 10rpx;
        display: flex;
        align-items: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #e40d1d;
      }
    }

    .type-list {
      width: calc(100% - 130rpx);
      box-sizing: border-box;
      padding-left: 16rpx;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      .type-item {
        width: 150rpx;
        padding: 0 0 10rpx;
        display: flex;
        justify-content: space-between;

        &-title {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        &-num {
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
  }
}
.qiangguang > image {
  width: 100%;
  height: 100%;
}

.qiangguang {
  width: 100%;
  height: 100%;
  /* border-radius: 20rpx; */
  /* background: rgb(0, 0, 0);
		opacity: 0.45; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.header_view_sel {
  min-width: 144rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  filter: grayscale(0);

  font-family: 光良酒-干杯体, 光良酒-干杯体;
  font-weight: 400;
  font-size: 28rpx;
  color: #fff;
  text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
    0 0 2px #000000;
}

.header_view {
  min-width: 144rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  filter: grayscale(1);

  font-family: 光良酒-干杯体, 光良酒-干杯体;
  font-weight: 400;
  font-size: 28rpx;
  color: #999999;
  text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
    0 0 2px #000000;
}

.header > view {
  // width: 180rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header {
  width: 690rpx;
  height: 88rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  overflow-x: scroll;
  color: #333333;
}

.content {
  padding: 1rpx 0 100rpx;
  width: 100vw;
  min-height: 100vh;
  // padding-top: 1rpx;
  padding-bottom: 100rpx;
  box-sizing: border-box;
  /* background: #FAFAFA; */
}

.goods_v {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
  padding: 0 30rpx;
  padding-top: 30rpx;
}
// .goods_v_1 {
//   width: 32rpx;
//   height: 32rpx;
//   margin-left: 10rpx;
// }
</style>
